<template>
  <div>
    <n-card :bordered="false" class="proCard">
      <n-grid cols="2 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
        <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
          <n-form
            :label-width="120"
            :model="formValue"
            :rules="rules"
            label-placement="left"
            ref="formRef"
            class="py-8"
          >
            <n-form-item label="姓名" path="name">
              <n-input v-model:value="formValue.name" placeholder="姓名" />
            </n-form-item>
            <n-form-item label="手机号码" path="mobile">
              <n-input v-model:value="formValue.mobile" placeholder="手机号码" />
            </n-form-item>
            <n-form-item label="部门" path="role_id">
              <n-select v-model:value="formValue.role_id" :options="roles" />
            </n-form-item>
            <n-form-item label="性别" path="sex">
              <n-radio-group v-model:value="formValue.sex" name="sex">
                <n-space>
                  <n-radio :value="1">男</n-radio>
                  <n-radio :value="2">女</n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
            <n-form-item label="身份证号码" path="id_card">
              <n-input v-model:value="formValue.id_card" placeholder="身份证号码" />
            </n-form-item>
            <n-form-item label="Email" path="email">
              <n-input v-model:value="formValue.email" placeholder="Email" />
            </n-form-item>
            <n-form-item label="岗位" path="post">
              <n-input v-model:value="formValue.post" placeholder="岗位" />
            </n-form-item>
            <n-form-item label="是否启用" path="status">
              <n-switch v-model:value="formValue.status" />
            </n-form-item>
          </n-form>
        </n-grid-item>
      </n-grid>
    </n-card>
    <n-space justify="center">
      <n-button type="primary" @click="formSubmit">保存</n-button>
      <n-button type="warning" @click="resetForm">重置</n-button>
      <n-button @click="router.go(-1)">返回</n-button>
    </n-space>
  </div>
</template>

<script lang="ts" setup>
  import { ref, unref, reactive, onMounted } from 'vue';
  import { useMessage } from 'naive-ui';
  import { ResultEnum } from '@/enums/httpEnum';
  import { getAdmin, patchAdmin, putAdmin } from '@/api/admin/admin';
  import { useRouter } from 'vue-router';
  import { getRoleAll } from '@/api/role/role';
  import router from '@/router';
  const id: any = ref(useRouter().currentRoute.value.params.id);
  let roles = ref<any>([]);

  const rules = {
    name: {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
    mobile: {
      required: true,
      message: '请输入手机号码',
      trigger: 'blur',
    },
  };

  const formRef: any = ref(null);
  const message = useMessage();
  const defaultValueRef = () => ({
    id: 0,
    role_id: 0,
    name: '',
    sex: '',
    id_card: '',
    entry_date: null,
    mobile: '',
    email: '',
    post: '',
    status: true,
  });

  let formValue = reactive(defaultValueRef());
  function formSubmit() {
    formRef.value.validate(async (errors) => {
      if (!errors) {
        let response: any = null;
        if (formValue.id == 0) {
          response = await putAdmin(formValue);
        } else {
          response = await patchAdmin(formValue);
        }

        if (response.code == ResultEnum.SUCCESS) {
          message.success('操作成功');
        }
      } else {
        message.error('验证失败，请填写完整信息');
      }
    });
  }

  const getData = async () => {
    const response: any = await getAdmin(formValue.id);
    if (response.code === ResultEnum.SUCCESS) {
      response.data.price = parseFloat(response.data.price);
      Object.assign(formValue, response.data);
    }
  };

  const getRole = async () => {
    const response: any = await getRoleAll();
    response.data.forEach((element: any) => {
      roles.value.push({ label: element.name, value: element.id });
    });
  };

  function resetForm() {
    formRef.value.restoreValidation();
    formValue = Object.assign(unref(formValue), defaultValueRef());
  }

  onMounted(() => {
    formValue.id = id.value;
    if (formValue.id != 0) {
      getData();
    }
    getRole();
  });
</script>
